<template>
	<view>
	<scroll-view class="containter" scroll-x="false" scroll-y="true">
		
		<view class="Head"> 
			<view class="head1">
				<view class="shouhuodizhi" @click="chooseAddress()">
					<text class="detailaddress" v-model="totaladdress">{{totaladdress}}</text><br>
					<text class="phone_and_person" v-model="person">{{person}}</text><text class="phone_and_person" v-model="phone">{{phone}}</text>
					<text class="tips">选择地址</text>
				</view>
				
				<uni-list :border="false">
				<uni-list-item class="songdashijian" title="立即送达"  showArrow="true"></uni-list-item>
				</uni-list>
				
				<uni-list :border="false">
				<uni-list-item class="zhifufangshi" title="支付方式"  showArrow="true"></uni-list-item>
				</uni-list>
				
			</view>
		</view>
	
	<view class="body">
		<text class="shopname" v-model="shopname">{{shopname}}</text>
		<view v-for="item in order" class="items">
			<view class="item">	
				<view class="itemhead">
					<view>
						<image v-bind:src="item.itempic" style="width: 50px;height: 50px;"></image>
					</view>
					<view class="itemstr">
						<text class="thingname">{{item.itemname}}</text>
						<text class="count">x {{item.currentnum}}</text>
					</view>
				</view>
				
					
				
				<text class="renminbi">￥</text><text class="thisrowprice">{{chengfa(item.itemprice,item.currentnum)}}</text>
				
			</view>	
				<text style="display: none;">{{item.itemid}}</text><br>
	</view>
	
		<view class="xiaojibody">
			<view  class="xiaojititle">
				<text class="str">小计￥</text><text v-model="totalPrice" class="xiaoji">{{totalPrice}}</text>
			</view>
			
		</view>
	
	</view>
	
	
	
	
	
	</scroll-view>
	<view class="bottombar">
	
			<view class="button-sp-area">
				<view class="front"><text class="renminbi2">￥</text><text class="xiaoji2" v-model="totalPrice">{{totalPrice}}</text></view>
				<button v-bind:disabled="ifdisable" type="primary" plain="true" style="border-radius: 40px;width:100px;height: 35px;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom=0px;font-size: 15px;background-color: #007AFF; color: #FFFFFF;" @click="qujiesuan()">提交订单</button>
			</view>
	
	</view>
	
	</view>
</template>

<script>
	export default{
		data(){
			return{
					shopid:"",
					shopname:"",
					order:"",
					tmp:[],
					address:"",
					detailaddress:"未选择地址",
					person:"",
					phone:"",
					totaladdress:"未选择地址",
					totalPrice:"",
					dto:{},
					ifdisable:false,
					totalcount:0,
			}
		},
		onLoad:function(option){
			this.order=JSON.parse(option.order)
			this.tmp=JSON.parse(option.order)
			this.shopname=option.shopname
			this.totalPrice=option.totalPrice
			this.shopid=option.shopid
			this.totalcount=option.totalcount
		},
		methods:{
			chooseAddress(){
				uni.navigateTo({
					url:"chooseAddress"
				});
			},
			qujiesuan(){
				if(uni.getStorageSync("addressid")==""){
					uni.showToast({
						title:"请选择地址",
						icon:"none"
					});
				}
				else{
		
				this.ifdisable=true
				// uni.showToast({
				// 	title:JSON.stringify(this.dto)
				// });
				uni.request({
					url:getApp().globalData.http+"/order/submit",
					data:{
						products:JSON.stringify(this.order),
						addressInfo:JSON.stringify(this.dto),
						shopid:this.shopid,
						totalcount:this.totalcount
						
						
					},
					method:"POST",
					header:{
						'Authorization' : uni.getStorageSync("token"),
						'content-type':"application/x-www-form-urlencoded"
						
					},
					success: (res) => {
						if(res.data=="fail"){
							// getApp().submitorder="true"//判断是否是提交订单后跳到订单页面的
							// // uni.switchTab({
							// // 	url:"../../order/order",
								
							// // });
			
							uni.showToast({
								title:"点太快了,请稍后再试"
							});
							this.ifdisable=false
						}
						else{
							uni.navigateTo({
								url:"./pay?orderid="+res.data+"&fromwhere=submit&shopname="+this.shopname         
								+"&totalprice="+this.totalPrice	

							});
							uni.showToast({
								title:"提交成功",
							})
							
						}
					}
				})
			}
			
			}
			
		},
		onShow() {
			this.address=uni.getStorageSync("address")
			this.detailaddress=uni.getStorageSync("detailaddress")
			this.person=uni.getStorageSync("person")
			this.phone=uni.getStorageSync("phone_address")
			this.totaladdress=this.address+this.detailaddress
			
			if(this.totaladdress==""){
				this.totaladdress="未选择地址"
			}
			this.$set(this.dto,"address",this.totaladdress)
			this.$set(this.dto,"sendtowho",this.person)
			this.$set(this.dto,"phone",this.phone)
			this.$set(this.dto,"totalprice",this.totalPrice)
			
			
		},
		computed:{
			chengfa(a,b){
				return function(arg1, arg2) {
					
					arg2=arg2+".00"
					var m = 0;
					var s1 = arg1.toString();
					var s2 = arg2.toString();
					try {
						m += s1.split(".")[1].length;
					} catch (e) {}
					try {
						m += s2.split(".")[1].length;
					} catch (e) {}
				 
					return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
				}
			}
			
		}
		
	}
</script>

<style scoped>
	.containter{
		overflow: hidden;
		width: auto;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* background-color: #007AFF; */
		background-image: linear-gradient(to bottom, #51b3f6 1% , #fafafa 20%);
		background-position: top;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 10px;
		/* padding-bottom: 50px; */
		
		
	}
	.Head{
		width: auto;
		
		height: auto;
		border-radius: 10px;
		background-color: #FFFFFF;
		margin-top: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		overflow: hidden;
	}
	.head1{
		background-color: #FFFFFF;
		margin-top: 5px;
		/* margin-left: 8px; */
		/* margin-right: 8px; */
		/* height: 10px; */
		height: auto;
		width: 100%;
	}
	.shouhuodizhi{
		border-radius: 20px;
		background-color: #FFFFFF;
		height: auto;
		width: 100%;
		margin-top: 10px;
		
		overflow: hidden;

	}
	
	.detailaddress{
		font-size: 22px;
		/* margin: 10px; */
		margin-left: 15px;
		margin-top: 10px;
		margin-bottom: 10px;
		font-weight: 500;
		display: inline-block;
		
	}
	.phone_and_person{
		margin-left: 15px;
		margin-top: 5px;
		font-size: 15px;
		color: #7F7F7F
	}
	.tips{
		float: right;
		font-size: 14px;
		color: #999999;
		margin-right: 10px;
		padding-top: -30px;
	}
	
	.songdashijian{
		border-radius: 20px;
		background-color: #FFFFFF;
	}
	.zhifufangshi{
		border-radius: 20px;
		background-color: #FFFFFF;
		/* margin-top: 10px; */
		/* margin-bottom: 100px; */
		/* height: 20px; */
		margin-bottom: 20px;
		
	}
	
	.body{
		width: auto;
		
		height: auto;
		border-radius: 10px;
		background-color: #FFFFFF;
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		overflow: hidden;
		padding-bottom: 40px;
		
	}
	.shopname{
		margin: 10px;
		font-size: 15px;
		color: #7F7F7F;
	}
	
	.items{
		width: 100%;
	}
	
	.item{
		display: flex;
		
		flex-direction: row;
		align-items: center;
		background-color: #FFFFFF;
		margin-bottom: -20px;
		
	}
	.itemhead{
		display: flex;
		flex-direction: row;
		margin: 10px;
		
	}
	.itemstr{
		display: flex;
		flex-direction: column;
		
		/* margin: 5px; */
	}
	.thingname{
		margin-top: -5px;
		margin-left: 10px;
		font-size: 15px;
	}
	.count{
		margin-left: 13px;
		font-size: 12px;
		margin-top: 7px;
		color: #7F7F7F;
	}
	.thisrowprice{
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 3px;
		
		
	}
	.renminbi{
		font-size: 13px;
		margin-left: 55%;
		
	}
	.xiaojibody{
		border-top: #F1F1F1 0.1px solid;
		height: 60px;
		width: 100%;
		padding-left: 2px;
		padding-right: 2px;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
		
		
		
	}
	.xiaoji{
		
		/* margin-left: 80%; */
		font-size: 20px;
		font-weight: 500;
		margin-bottom: 10px;
		/* position: fixed; */
		
		
		
	}
	.xiaojititle{
		margin-left: 68%;
		/* position: fixed; */
	}
	.str{
		font-size: 13px;
	}
	.bottombar{
		width: 100%;
		height: 50px;
		background-color: #fafafa;
		/* background-color: #000000; */
		
		position: fixed;
		
		bottom: var(--window-bottom);
		display: flex;
		flex-direction: row;
		align-items: center;
	
	}
	.button-sp-area{
		margin-left: 50%;
		margin-top: 0%;
		display: flex;
		flex-direction: row;
		/* background-color: #078A05; */
	}
	.front{
		/* background-color: #CCCCCC; */
		margin-right: 10px;
	
	}
	.renminbi2{
		
		font-size: 13px;
		color: 	red;
		
	}
	.xiaoji2{
		/* padding-top: 3%; */
		font-size: 22px;
		color: 	red;
		
	}
</style>
